import React from 'react';
import { NavLink }from 'react-router-dom';
import {Breadcrumb} from 'antd';
import {observer,inject} from 'mobx-react'

@inject('breadcrumbStore')
@observer
class NewBreadcrumb extends React.Component {
    breadcrumb=(list)=>{
        return list.map((item,i)=>{
            return (
                <Breadcrumb.Item key={item.path}>
                    <NavLink to={item.path} key={item.path} onClick={this.changebreadcrum.bind(this,item.path,item.name)}>{item.name}</NavLink>
                </Breadcrumb.Item>
            )
        })
    }
    changebreadcrum=(path,name)=>{
        this.props.breadcrumbStore.changebreadcrumb(path,name)
    }
    render() {
        return (
            <div>
                <Breadcrumb style={{ marginTop: '16px',marginLeft:'15px' }}>
                    {this.breadcrumb(this.props.breadcrumbStore.breadcrumbList)}
                </Breadcrumb>
            </div>
            );
    }
}
export default NewBreadcrumb